<style lang="stylus" scoped>
  .custom-link
    padding 20px 0
  .input-item
    margin-bottom 20px
    .label
      height 14px
      margin-bottom 6px
      line-height 14px
      font-size 12px
      color #6f6f85
  .undercoat
    display inline-block
    width 50px
    height 26px
    border 4px solid #1a1d23
    border-radius 4px
    text-align center
    &:before
      content: '底色'
      display block
      width 24px
      height 100%
      writing-mode vertical-lr
      background #1a1d23
      line-height 20px
      font-size 12px
      color #565d6c
  .size-selector
    margin-left 10px
  .footer
    display flex
    justify-content space-between
    padding-top 20px
    text-align right
  </style>
  
  <template>
    <div class="custom-link">
      <div class="input-item">
        <div class="label">
          Cron事件名称
        </div>
        <v-input
          v-model="eventName"
          type="text"
          placeholder="输入事件名称"
          maxlength="20"
        />
      </div>
      <div class="input-item">
        <div class="label">
          目的时间 <small style="float: right;">例(每天的17:30)：0 30 17 * * *</small>
        </div>
        <v-input
          v-model="eventTime"
          v-focus
          type="text"
          placeholder="输入目标时间(cron表达式)"
        />
      </div>
      <div class="footer">
        <v-dropdown
          class="undercoat"
          type="plain"
          :style="{
            background: undercoat
          }"
        >
          <template #body>
            <color-selector v-model="undercoat" />
          </template>
        </v-dropdown>

        <v-button @click="confirm">
          确定
        </v-button>
      </div>
    </div>
  </template>
  
  <script lang="ts">
  import { Bookmark, bookmarkOriginData } from '@database/entity/bookmark'
  import { Message } from '@/ui-lib/message/index'
  import ColorSelector from '../../add-bookmark/color-selector.vue'
  import { splitInFirstColon } from '@/assets/ts/utils'
  import { ref } from 'vue'
  import { timeFormat } from '@/assets/ts/utils'
  import {getNextCronTime,getNextTenCronTime} from '@/assets/ts/cron'
  export default {
    components: { ColorSelector },
    props: {
      data: {
        type: Bookmark,
        default() {
          return null
        },
      },
    },
    emits: ['confirm'],
    setup(props: {
      data: Bookmark
    }, context) {
      const paramsSeprator = '-|-'
      const propsBookmark = props.data as bookmarkOriginData
      const widgetsValue = propsBookmark.value as string || ''
      const [widgetsType, widgetsParams] = splitInFirstColon(widgetsValue)
      const undercoat = ref(propsBookmark.undercoat)
      const eventName = ref(propsBookmark.name)
      const eventTime = ref(propsBookmark.name)

      if (widgetsParams) {
        const [eventNameInParams, eventTimeInParams,cronExpressionParams] = widgetsParams.split(paramsSeprator)
        if (eventNameInParams) {
          eventName.value = eventNameInParams
          eventTime.value = cronExpressionParams
        }
      }
      return {
        undercoat,
        eventName,
        eventTime,
        confirm() {

          if (!eventName.value) {
            new Message({
              message: '事件名没有写哦～',
            })
            return
          }

          if (!eventTime.value) {
            new Message({
              message: '事件截止时间一定要填哦～',
            })
            return
          }
       
          const cronExpression = eventTime.value;
          const cenCronTimeArr = getNextTenCronTime(cronExpression);

          let cenCronTime = new Date(cenCronTimeArr[1]);
          const today = new Date();
          today.setHours(23, 59, 59, 999);
          today.setDate(today.getDate());
          if(cenCronTime > today){
            cenCronTime = new Date(cenCronTimeArr[0]);
          }
          
          const eventTimeStample = cenCronTime.getTime()
          context.emit('confirm', {
            undercoat: undercoat.value,
            value: `${widgetsType}:${eventName.value}${paramsSeprator}${eventTimeStample}${paramsSeprator}${cronExpression}`,
          })
        },
      }
    },
  }
  </script>